Rendering best practices

By optimizing the rendering performance you can significantly improve the performance of your application.

Optimizing rendering performance of your applications

To optimize rendering performance of your applications consider:

Shaders that contain a lot of fragment-based calculations can be the heaviest part of rendering. See Optimizing fragment shaders.
Recalculation of layout caused by changes in the scene can hinder the performance of the CPU. See Optimizing the rendering of layouts.
Placing the 2D nodes in the scene graph in front-to-back order. See Setting nodes for efficient rendering.
Distribute the rendering workload across several frames to reduce the amount of work and time required to render one whole frame. See Distributing rendering across several frames.
Excessive overdraw can decrease performance on the GPU in the form of increased fill-rate. See Preventing overdraw with the Sorting Filter.
When your application contains nodes that do not have to be rendered every frame, create a composer that renders such nodes only once. See Rendering static content.
When rendering opaque content, always render from front to back. Render from back to front only when you have a good reason to do so.
Because visualization of transparent nodes relies on having proper data behind them, in order to solve the blending equations properly, to correctly render transparent nodes, you must render them from back to front. See Rendering transparent nodes.
If nodes are presented in an order that requires excessive switching between shader programs, the rendering can slow down. See Reducing shader switches.
Render animated items in lower quality while they are moving. Improves the performance, but decreases the quality.
To dynamically change the size of text in a Text Block node, use the Scale property field of either Render Transformation or Layout Transformation properties, instead of the Font Size property. For example, use this approach when you want to animate the size of text in a Text Block node.
When you use the Font Size property to dynamically scale the text, Kanzi creates multiple textures for different font sizes and does not release them from the memory.
Avoid unnecessary fill. For example, avoid:
- Filling the Screen with a 3D plane. For example, if you use a 3D plane to draw a circular object using just a texture with alpha 0 in the corners, it is in most cases faster to render it if you cut the mesh around the form because of the fill-rate hit.
- Rendering 3D with alpha set to 0. This causes fill, but has no visual effect.
Instead of rendering effects in real-time, bake the effects into textures. For example, create textures to simulate shadows and depth of field. Improves the performance, but also increases the memory consumption.

Viewing nodes that are rendered into texture

Switching between framebuffer objects can cause significant performance reduction on some platforms. Conditions when Kanzi renders a node into a texture can be complex. For example, rotation, scale, or opacity can cause render to texture to occur.

To see whether a node is rendered into a texture, and causing a framebuffer object switch, in the Preview click and use the drop-down menu to select Framebuffer objects.
The Preview highlights the layers that are rendered into texture with transparent, orange stripes.

Rendering best practices

Optimizing rendering performance of your applications

Viewing nodes that are rendered into texture

See also